<template>
  <div>
    <div class="gl_mb_15 gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>状态</p>
          <el-select v-model="qo.IsEffectived" size="mini" placeholder="请选择机构等级" filterable @change="getPageList()">
            <el-option v-for="item in certificateStatus" :key="item.code" :value="item.code" :label="item.name" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>官方科目名称</p>
          <el-input v-model="qo.SubjectName" size="mini" placeholder="请输入非官方科目名称" clearable @change="getPageList()" />
        </el-col>
        <!-- 按钮 -->
        <el-col :md="12" :lg="16" align="right">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="getPageList()">查询</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table v-loading="tableLoading" size="mini" :data="tableData" class="gl_table_noBorder" style="width: 100%">
      <el-table-column width="45">
        <template slot-scope="{ row }">
          <div v-show="row.isOfficial" class="flex_official">官</div>
        </template>
      </el-table-column>
      <el-table-column prop="subjectName" label="科目名称" />
      <el-table-column label="证书名称">
        <template slot-scope="{ row }">
          <span v-if="!row.isEdit">{{ row.name }}</span>
          <el-input v-else v-model.trim="row.nameInput" size="mini" @keyup.enter.native="clickComplete(row)" />
        </template>
      </el-table-column>
      <el-table-column label="证书类型">
        <template slot-scope="{ row }">
          <span v-if="!row.isEdit">{{ row.certificateType }}</span>
          <el-input v-else v-model.trim="row.certificateTypeInput" size="mini" @keyup.enter.native="clickComplete(row)" />
        </template>
      </el-table-column>
      <el-table-column label="等级">
        <template slot-scope="{ row }">
          <span v-if="!row.isEdit">{{ row.certificateLevel }}</span>
          <el-input v-else v-model.trim="row.certificateLevelInput" size="mini" @keyup.enter.native="clickComplete(row)" />
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="{ row }">
          <span>{{ row.isEffectived ? '生效' : '未生效' }}</span>
        </template>
      </el-table-column>
      <el-table-column width="180" label="操作">
        <template slot-scope="{ row }">
          <el-button v-if="!row.isEdit" size="mini" type="text" @click="clickEidt(row)">编辑</el-button>
          <el-button v-if="row.isEdit" size="mini" type="text" @click="clickComplete(row)">完成</el-button>
          <el-button v-if="row.isEdit" size="mini" type="text" @click="clickCancel(row)">取消</el-button>
          <el-button v-if="!row.isEdit" size="mini" type="text" @click="clickDel(row)"><span class="gl_color_error">删除</span></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 证书
import {
  api_GET_TrainSubjectCertificate, // 获取证书列表
  api_PUT_TrainSubjectCertificateId, // 更新证书
  api_DELETE_TrainSubjectCertificateId // 删除证书
} from '@/extend/api/trainswaggerApi/app.js';
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      tableLoading: false,
      tableData: [],
      qo: {
        IsOfficial: true,
        IsEffectived: null,
        SubjectName: null
      },
      certificateStatus: [
        {
          code: null,
          name: '全部'
        },
        {
          code: true,
          name: '生效'
        },
        {
          code: false,
          name: '未生效'
        }
      ]
    };
  },
  watch: {
    isShow: {
      immediate: true,
      handler (val) {
        if (val) {
          this.getPageList();
        }
      }
    }
  },
  methods: {
    // 获取页面数据
    getPageList () {
      this.tableLoading = true;
      api_GET_TrainSubjectCertificate(this.qo)
        .then(
          res => {
            this.tableLoading = false;
            const _res = res || [];
            this.tableData = _res.map(item => {
              item.isEdit = false;
              item.nameInput = item.name;
              item.certificateLevelInput = item.certificateLevel;
              item.certificateTypeInput = item.certificateType;
              return item;
            });

            // this.tableData = _res.filter(item => {
            //   if (item.isOfficial) {
            //     item.isEdit = false;
            //     item.nameInput = item.name;
            //     item.certificateLevelInput = item.certificateLevel;
            //     item.certificateTypeInput = item.certificateType;
            //   }
            //   return item.isOfficial;
            // });
          }
        )
        .catch(
          error => {
            this.tableLoading = false;
            this.$message({
              message: `证书获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 点击编辑
    clickEidt (row) {
      row.isEdit = true;
      row.nameInput = row.name;
      row.certificateLevelInput = row.certificateLevel;
      row.certificateTypeInput = row.certificateType;
      console.log('row: ', row);
    },
    // 点击取消
    clickCancel (row) {
      row.isEdit = false;
      row.nameInput = row.name;
      row.certificateLevelInput = row.certificateLevel;
      row.certificateTypeInput = row.certificateType;
    },
    // 点击完成
    clickComplete (row) {
      this.tableLoading = true;
      const _vo = {
        name: row.nameInput,
        certificateLevel: row.certificateLevelInput || null,
        certificateType: row.certificateTypeInput || null
      };
      this.updateCertificateAPI(row.id, _vo)
        .then(
          res => {
            row.isEdit = false;
            row.name = res.name;
            row.certificateLevel = res.certificateLevel;
            row.certificateType = res.certificateType;
            row.isEffectived = res.isEffectived;
            this.tableLoading = false;
            this.$message({
              message: `证书修改成功`,
              type: 'success',
              showClose: true
            });
          }
        )
        .catch(
          error => {
            this.tableLoading = false;
            this.$message({
              message: `证书修改失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 更新证书API
    updateCertificateAPI (id, vo) {
      return new Promise((reslove, reject) => {
        api_PUT_TrainSubjectCertificateId(id, vo)
          .then(
            res => {
              reslove(res);
            }
          )
          .catch(
            error => {
              reject(error);
            }
          );
      });
    },
    // 删除证书
    clickDel (row) {
      this.$confirm(`您确定删除${row.name}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(
          () => {
            this.deleteCertificateAPI(row.id);
          }
        );
    },
    deleteCertificateAPI (id) {
      api_DELETE_TrainSubjectCertificateId(id)
        .then(
          res => {
            this.$message({
              message: `删除证书成功`,
              type: 'success',
              showClose: true
            });
            this.getPageList();
          }
        )
        .catch(
          error => {
            this.$message({
              message: `删除证书失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    reset () {
      this.qo = {
        IsOfficial: true,
        IsEffectived: null,
        SubjectName: null
      };
      this.getPageList();
    }
  }
};
</script>

<style lang="scss" scoped>
  .flex_official {
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    color: #1990ff;
    border: 1px solid #1990ff;
    border-radius: 50%;
    background-color: #fff;
  }
</style>
